<template>
	<ScaleScreen :width="3440" :height="1440" class="scale-wrap" 
		:selfAdaption="$store.getters.isScale"
		:fullScreen="false">
		<div class="bg">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<!-- 头部 s -->
				<div class="title-wrap">
									
					<div v-if="!isHome" class="returnHome" @click="onClickHome"><i class="el-icon-arrow-left"></i>返回首页</div>
				</div>
				<!-- 头部 e-->

				<!-- 内容  s-->
				<router-view></router-view>
				<!-- 内容 e -->
			</div>
		</div>
	</ScaleScreen>
</template>

<script>
import { formatTime } from '../utils/index.js';
import ScaleScreen from '@/components/scale-screen/scale-screen.vue';
export default {
	components: { ScaleScreen },
	data() {
		return {			
			loading: true,			
		};
	},
	computed:{
		isHome(){
			return this.$route.name=="home"
		}
	},
	created() {		
		
		let timer = setTimeout(() => {
			this.loading = false;
			clearTimeout(timer);
		}, 500); //页面自适应缩放需要500时间的
	},
	
	methods: {	
		onClickHome(){
			this.$router.push("/home")
		}
	}
};
</script>

<style lang="scss" scoped>
.scale-wrap {
	color: #FFFFFF;
	overflow: hidden;
	.bg {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: rgba(9,26,35,1) ;//#091A23; // #03050c;
	}

	.host-body {
		width: 100%;
		height: 100%;

		.title-wrap {
			height: 150px;
			background-image: url('~@/assets/img/header.png');
			background-size: cover;
			background-position: center center;
			position: relative;
			// margin-bottom: 4px;
			
			.returnHome {
				cursor: pointer;
				position: absolute;
				right: 30px;
				bottom: 2px;
				font-size: 24px;
				font-weight: bold;
				color: limegreen;
				letter-spacing: 2px;
				
				i{
					margin: 0 5px;
					color:black;
					width: 26px;
					height:26px ;
					font-size: 24px;
					border-radius: 50%;
					background-color: limegreen;
					text-align: center;
					line-height: 24px;
				}
			}
		}
		
	}
}
</style>
